{extend name="base/basic" /}
{block name="title"} 首页 {/block}
<!-- Page Content -->
{block name="content"}
<div style="padding-top: 11px">
    <!--  头部工具-->
    <script type="text/html" id="toolbarDemo">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm" lay-event="add">添加菜单</button>
            <button class="layui-btn layui-btn-sm" onclick="javascript:window.location.reload();" lay-event="">刷新</button>
            <button id="btnExpandAll" class="layui-btn layui-btn-sm layui-btn-primary">
                <i class="layui-icon">&#xe668;</i>展开全部
            </button>
            <button id="btnFoldAll" class="layui-btn layui-btn-sm layui-btn-primary">
                <i class="layui-icon">&#xe66b;</i>折叠全部
            </button>
        </div>
    </script>
    <!--  头部工具-->

    <!-- 表格容器-->
    <table id="demoTreeTb" lay-filter="myTable" class="layui-tab" lay-even lay-skin="line" lay-size="lg"></table>
    <!-- 表格容器-->

    <!-- 状态模板 -->
    <script type="text/html" id="buttonTpl">
        {{#  if(d.status == 1){ }}
        <a class="layui-btn layui-btn-xs" lay-event="check">显示</a>
        {{#  } else { }}
        <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="check">隐藏</a>
        {{#  } }}
    </script>
    <!-- 状态模板 -->

    <!--  行工具按鈕-->
    <script type="text/html" id="bar">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>
    <!--  行工具按鈕-->
</div>
<!-- /Page Content -->
{/block}
{block name="js"}
<script src="__LAYUI__/treeTable.js"></script>
<script>
    layui.use(['layer', 'util', 'treeTable'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var util = layui.util;
        var treeTable = layui.treeTable;
        $('body').removeClass('layui-hide');
        // 渲染表格
        var insTb = treeTable.render({
            elem: '#demoTreeTb',
            url: "{:url('listData')}",
            toolbar: '#toolbarDemo',
            height: 'full-200',
            tree: {
                iconIndex: 1,
                isPidData: true,
                idName: 'id',
                pidName: 'pid'
            },
            cols: [
                [
                    {field: 'id', title: 'ID',with:"10px"},
                    {field: 'title', title: '菜单名称',},
                    {field: 'name', title: '菜单地址',},
                    {field: 'status', title: '状态',templet:"#buttonTpl"},
                    {align: 'center', toolbar: '#bar', title: '操作'}
                ]
            ],
            style: 'margin-top:0;'
        });


        // 头部工具栏点击事件
        treeTable.on('toolbar(demoTreeTb)', function (obj) {
            switch (obj.event) {
                case 'add':
                    layer.open({
                        type: 2, // 类型
                        id:'add',
                        anim:4, // 弹出动画 1-6
                        maxmin:true, // 最大最小化
                        offset: 'auto', // 坐标
                        title:'添加',
                        area: ['500px', '500px'], // 宽高
                        shadeClose:true, // 是否点击遮罩关闭
                        content: "{:url('addView')}" //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
                    });
                    break;
                case 'delete':
                    layer.msg('删除');
                    break;
                case 'update':
                    layer.msg('编辑');
                    break;
                case 'LAYTABLE_TIPS':
                    layer.msg('提示');
                    break;
            }
        });

        // 工具列点击事件
        treeTable.on('tool(demoTreeTb)', function (obj) {
            var event = obj.event;
            var data = obj.data; //获得当前行数据
            if (event === 'del') {
                layer.alert('您确定要删除操作吗?', {
                    skin: 'layui-layer-molv' //样式类名 自定义样式
                    ,title:'删除'
                    , closeBtn: 1 // 是否显示关闭按钮
                    , anim: 1 //动画类型
                    , btn: ['确定', '取消'] //按钮
                    , icon: 6 // icon
                    , yes: function () {
                        $.ajax({
                            type: "POST",
                            url: "{:url('del')}",
                            data: { id: data.id },
                            success: function (e) {
                                if(e.code == 1){
                                    layer.msg(e.msg,{icon:6,time:2000},function (){
                                        obj.del()
                                    },1000)
                                }else{
                                    layer.msg(e.msg,{icon:5,time:2000},function (){
                                        location.reload()
                                    })
                                }
                            }
                        }) //ajax结束
                    }
                    , btn2: function () {
                        console.log('取消啥也不干')
                    }
                });
            } else if (event === 'edit') {
                layer.open({
                    type: 2, // 类型
                    id:'add',
                    anim:4, // 弹出动画 1-6
                    maxmin:true, // 最大最小化
                    offset: 'auto', // 坐标
                    title:'菜单编辑',
                    area: ['500px', '500px'], // 宽高
                    shadeClose:true, // 是否点击遮罩关闭
                    content: "{:url('editView')}?id="+data.id //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
                });
                obj.update({authorityName: '新的名称'});
            }
        });

        // 全部展开
        $('#btnExpandAll').click(function () {
            insTb.expandAll();
        });

        // 全部折叠
        $('#btnFoldAll').click(function () {
            insTb.foldAll();
        });

        // 获取选中
        $('#btnGetChecked').click(function () {
            layer.alert('<pre>' + JSON.stringify(insTb.checkStatus().map(function (d) {
                return {
                    authorityName: d.authorityName,
                    authorityId: d.authorityId,
                    LAY_INDETERMINATE: d.LAY_INDETERMINATE
                };
            }), null, 3) + '</pre>');
        });

    });
</script>
{/block}